<template>
  <div>
    <div class="werapp">
      <div class="top-item">
        <h1>商品管理</h1>
        <el-button type="primary" @click="$router.push('/product/save')"
          ><i class="el-icon-plus"></i>添加商品</el-button
        >
      </div>
      <div class="btn-item">
        <el-select v-model="value" placeholder="按商品id查询">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input v-model="values" placeholder="关键字"></el-input>
        <el-button @click="search">查询</el-button>
      </div>
      <el-table :data="list" border style="width: 100%">
        <el-table-column prop="id" label="id" width="180"> </el-table-column>
        <el-table-column prop="name" label="信息" width="180">
          <template slot-scope="scope">
            {{ scope.row.name }} <br />
            {{ scope.row.subtitle }}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格"> </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            {{ scope.row.status == 1 ? "已下架" : "在售" }}
            <el-button type="warning" size="mini" @click="updowm(scope.row)">{{
              scope.row.status == 1 ? "上架" : "下架"
            }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >查看</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { goods, search, upstatus } from "../../../http/index.js";
export default {
  data() {
    return {
      options: [
        {
          value: "id",
          label: "按商品id查询",
        },
        {
          value: "name",
          label: "按商品名称查询",
        },
      ],
      values: "",
      value: "",
      type: "",
      listsearch: "",
      totalsearch: "",
      list: [],
      total: 0,
      pagesize: 5,
      pagenum: 1,
    };
  },
  created() {
    this.getdata();
  },
  methods: {
    //上架、下架
    updowm(v) {
      console.log(v);
      upstatus({
        productId: v.id,
        status: v.status == 1 ? 2 : 1,
      }).then((res) => {
        console.log(res);
        if (confirm(`你确定要吗？`)) {
          this.getdata();
          return alert(res.data.data);
        }
      });
    },
    // 搜索
    // search(){
    //     if(this.values){
    //         this.list=this.list.filter((c)=>{
    //             return c.name.includes(this.values)
    //         })
    //     }
    //     // this.getdata()
    // },
    search() {
      if (this.value) {
        if (this.value === "id") {
          this.type = "productId";
        } else {
          this.type = "productName";
        }
        search({
          pageNum: this.pagenum,
          [this.type]: this.values,
        }).then((res) => {
          this.list = res.data.data.list;
          this.total = res.data.data.total;
          console.log(res);
        });
      } else {
        alert("请选择如何查询条件");
      }
    },
    // 渲染
    getdata() {
      goods({ pageSize: this.pagesize, pageNum: this.pagenum })
        .then((res) => {
          console.log(res);
          this.list = res.data.data.list;
          this.total = res.data.data.total;
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.getdata();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagenum = val;
      if (this.value) {
        this.search();
      } else {
        this.getdata();
      }
    },
    // 查看
    handleEdit(index, row) {
      console.log(index, row);
      if (row.id) {
        this.$router.push({
          path: "/product/detail",
          query: {
            data: row.id,
          },
        });
      }else{
        return;
      }
    },
    // 编辑
    handleDelete(index, row) {
      console.log(index, row);
      if(row.id){
        this.$router.push({
          path:"/product/updata",
          query:{
            data:row.id
          }
        })
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.werapp {
  padding: 15px 30px;
  .top-item {
    display: flex;
    justify-content: space-between;
  }
  .btn-item {
    display: flex;
    & >>> .el-input__inner {
      width: 200px;
    }
    .el-input {
      width: 200px;
    }
  }
}
</style>